<section [formGroup]="loginDetailsForm" class="tw-mb-5 bit-compact:tw-mb-4">
  <bit-section-header>
    <h2 bitTypography="h6">
      {{ "loginCredentials" | i18n }}
    </h2>
  </bit-section-header>

  <bit-card>
    <bit-form-field>
      <bit-label>{{ "username" | i18n }}</bit-label>
      <input bitInput formControlName="username" />
      <button
        type="button"
        bitIconButton="bwi-generate"
        bitSuffix
        *ngIf="loginDetailsForm.controls.username.enabled"
        data-testid="generate-username-button"
        [label]="'generateUsername' | i18n"
        [bitAction]="generateUsername"
      ></button>
    </bit-form-field>

    <bit-form-field>
      <bit-label>{{ "password" | i18n }}</bit-label>
      <input bitInput formControlName="password" type="password" class="tw-font-mono" />
      <bit-hint *ngIf="loginDetailsForm.controls.password.enabled">
        <ng-container *ngIf="newPasswordGenerated">
          {{ "securePasswordGenerated" | i18n }}
        </ng-container>
        <ng-container *ngIf="!newPasswordGenerated">
          <span class="tw-sr-only">
            {{ "useGeneratorHelpTextPartOne" | i18n }} {{ "useGeneratorHelpTextPartTwo" | i18n }}
          </span>
          <span aria-hidden="true">
            {{ "useGeneratorHelpTextPartOne" | i18n }}
            <i class="bwi bwi-generate" aria-hidden="true"></i>
            {{ "useGeneratorHelpTextPartTwo" | i18n }}
          </span>
        </ng-container>
      </bit-hint>
      <button
        type="button"
        bitIconButton="bwi-check-circle"
        bitSuffix
        *ngIf="
          loginDetailsForm.controls.password.enabled &&
          loginDetailsForm.controls.password.value?.length > 0
        "
        data-testid="check-password-button"
        [label]="'checkPassword' | i18n"
        [bitAction]="checkPassword"
      ></button>
      <button
        type="button"
        bitIconButton
        bitSuffix
        *ngIf="viewHiddenFields"
        data-testid="toggle-password-visibility"
        bitPasswordInputToggle
        (toggledChange)="logVisibleEvent($event, EventType.Cipher_ClientToggledPasswordVisible)"
      ></button>
      <button
        type="button"
        bitIconButton="bwi-generate"
        bitSuffix
        *ngIf="loginDetailsForm.controls.password.enabled"
        data-testid="generate-password-button"
        [label]="'generatePassword' | i18n"
        [bitAction]="generatePassword"
      ></button>
    </bit-form-field>

    <bit-form-field *ngIf="hasPasskey">
      <bit-label>{{ "typePasskey" | i18n }}</bit-label>
      <input
        bitInput
        disabled
        [value]="fido2CredentialCreationDateValue"
        data-testid="passkey-field"
      />
      <button
        type="button"
        bitIconButton="bwi-minus-circle"
        buttonType="danger"
        bitSuffix
        *ngIf="loginDetailsForm.enabled && viewHiddenFields"
        [bitAction]="removePasskey"
        data-testid="remove-passkey-button"
        [label]="'removePasskey' | i18n"
      ></button>
    </bit-form-field>

    <bit-form-field disableMargin>
      <bit-label>
        {{ "authenticatorKey" | i18n }}
        <button
          bitLink
          type="button"
          [bitPopoverTriggerFor]="totpPopover"
          [appA11yTitle]="'learnMoreAboutAuthenticators' | i18n"
          slot="end"
        >
          <i class="bwi bwi-sm bwi-question-circle" aria-hidden="true"></i>
        </button>
        <bit-popover #totpPopover [title]="'totpHelperTitle' | i18n">
          <p class="tw-mb-0">
            {{ (canCaptureTotp ? "totpHelperWithCapture" : "totpHelper") | i18n }}
          </p>
        </bit-popover>
      </bit-label>
      <input bitInput formControlName="totp" type="password" class="tw-font-mono" />
      <button
        type="button"
        bitIconButton
        bitSuffix
        *ngIf="viewHiddenFields"
        data-testid="toggle-totp-visibility"
        bitPasswordInputToggle
        (toggledChange)="logVisibleEvent($event, EventType.Cipher_ClientToggledTOTPSeedVisible)"
      ></button>
      <button
        type="button"
        bitIconButton="bwi-camera"
        bitSuffix
        *ngIf="canCaptureTotp"
        data-testid="capture-totp-button"
        [bitAction]="captureTotp"
        [label]="'totpCapture' | i18n"
      ></button>
    </bit-form-field>
  </bit-card>
</section>

<vault-autofill-options></vault-autofill-options>
